<template>
  <el-card>
    <el-header>其他数据统计</el-header>
    <el-table :data="tableData" style="width: 100%" stripe>
      <el-table-column label="类别" prop="key" />
      <el-table-column label="数值" prop="value" />
    </el-table>
  </el-card>
</template>

<script lang="ts" setup>
import { listOtherData } from "@/api/aqiMeasuredResult";
import { onMounted, ref } from "vue";

defineOptions({
  name: "OtherData"
});

const tableData = ref([
  { key: "空气质量检测总数量", value: 0 },
  { key: "空气质量检测良好数量", value: 0 },
  { key: "省会城市网格覆盖范围", value: "" },
  { key: "大城市网格覆盖范围", value: "" }
]);

const listOtherDataList = async () => {
  try {
    const { data } = await listOtherData();
    console.log(data);

    tableData.value[0].value = data.count;
    tableData.value[1].value = data.goodCount;
    tableData.value[2].value = data.provinceCoverage;
    tableData.value[3].value = data.cityCoverage;
    console.log(tableData.value);
  } catch (error) {
    console.error("获取其他数据时出错:", error);
  }
};

onMounted(() => {
  console.log("OtherData mounted");
  listOtherDataList();
});
</script>

<style>
.el-header {
  font-weight: bold;
  color: black;
  font-size: 20px;
  text-align: center;
}
</style>
